<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	body{
		background: #333;
	}
	#pic{
		width: 400px;
		height: 500px;
		margin: 0 auto;
		background: #fff url(img/loader_ico.gif) no-repeat center center;
		position: relative;
	}
	#pic span{
		width: 100%;
		display: inline-block;
		position: absolute;
		height: 30px;
		background: #000;
		color: #fff;
		left: 0;
		text-align: center;
		line-height: 30px;
	}
	#sp1{
		top: 0;
	}
	#sp2{
		bottom: 0;
	}
	#pic img{
		width: 100%;
		height: 100%
	}
	ul{
		width: 100px;
		height: 220px;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 10px;
		bottom: -200px;
	}
	ul li{
		list-style: none;
		background: #666;
		width: 10px;
		height: 10px;
		margin-right: 5px;
		float: left;
	}
	</style>
</head>
<body>
<div id="pic">
	<span>数量加载中...</span>
	<img src="" name="image" />
	<span>图片加载中...</span>
	<ul></ul>
</div>

<script type="text/javascript">
	var pics=["img/1.png","img/2.png","img/3.png","img/4.png"];
	var names=["鸟","狐狸","长耳朵","面具"];
	var image=document.getElementsByTagName('img')[0];
	var spans=document.getElementsByTagName('span');
	var myUl=document.getElementsByTagName('ul')[0];
	var num=0;
	var timer=null;
	var lists=document.getElementsByTagName('li');
	autoPlay();
	function tab(num){
		for (var i = 0; i< lists.length; i++) {
			lists[i].style.background="#666";
		};
		lists[num].style.background="#FC3";
		image.src=pics[num];
		// 数组图片
		spans[1].innerHTML=names[num];
		// 分页
		spans[0].innerHTML=(num+1)+"/"+lists.length;
	}
	function autoPlay(){
		timer=setInterval(function(){
			tab(num);
			num++;
			num=num%lists.length;
		},1000);
	}
	for (var i =0; i <pics.length; i++) {
		var oli=document.createElement("li");
		myUl.appendChild(oli);
	};
	
	for (var i =0; i <lists.length; i++) {
		lists[i].num=i;
		lists[i].onclick=function(){
			tab(this.num);
		}
		lists[i].onmouseover=function(){
			num=this.num;
			tab(this.num);
			clearInterval(timer);
		}
		lists[i].onmouseout=function(){
			autoPlay();
		}
	};
	image.onmouseover=function(){
		clearInterval(timer);
	}
	image.onmouseout=function(){
		autoPlay();
	}

</script>
</body>
</html>